﻿





const template = `
   <div id="standalone-container">
  <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font"></select>
      <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <button class="ql-video"></button>
      <button class="ql-formula"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>
  <div id="editor" style="height: 220px">
  </div>
</div>




   <button @click='GetText'>GetText</button>
   <button @click='GetHTML'>Gethtml</button>
`;

const options = {
    modules: {
        syntax: true,
        toolbar: '#toolbar-container',
    },
    placeholder: 'Compose an epic...',
    theme: 'snow',
};

export default {
    name: 'quill-editor',
    data(){
        return
        {
            quill: { }    
        } 
    },
    mounted() {
        this.Load();
    },
    methods: {
        Load() {
            const editorElement = document.querySelector('#editor');
            if (!editorElement) {
                console.error('Editor element not found!');
                return;
            }
            this.quill = new Quill(editorElement, options);
            console.log('Quill instance created:', this.quill);
        },
        GetText()
        {
            const delta = this.quill.getContents();
            console.log('delta:', delta);
        },
        GetHTML()
        {
            const htmlContent = this.quill.root.innerHTML;
            console.log(htmlContent);
            const htmlContent1 = this.quill.container.firstChild.innerHTML;
            console.log(htmlContent1);

            const html = this.quill.getSemanticHTML(0, 9999999);
            console.log(html);
        }
    },
    template: template

}